<template>
    <div class="app-container">
        <div class="customContainer finance_store_container">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right"
                        unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border fit
               >
                <el-table-column align="center" label='门店名称	' prop="store_name">
                </el-table-column>
                <el-table-column align="center" label="时间">
                    <template slot-scope="scope">
                        {{formInline.start_time}} - {{formInline.end_time}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label='实收金额(元)'>
                    <template slot-scope="scope">
                        {{scope.row.actual*1|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="应收金额(元)">
                    <template slot-scope="scope">
                        {{scope.row.amount*1|keepTwoNum}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label='差额(元)'>
                    <template slot-scope="scope">
                        <el-button :class="{danger:scope.row.gap*1<0}" @click="gapClick(scope.row.store_id,scope.$index,scope.row.store_name)"
                            type="text" size="small">{{scope.row.gap*1|keepTwoNum}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="门店相关财务">
                    <template slot-scope="scope">
                        沈光华
                    </template>
                </el-table-column>
                <el-table-column align="center" label='备注'>
                    <template slot-scope="scope">
                        {{scope.row.gap*1
                        <0? '未处理' : scope.row.gap*1==0? '正常' : '无需处理' }} </template> </el-table-column> </el-table>
                            <!-- 差额弹框 -->
                            <el-dialog :close-on-click-modal="false" width="80%" title="门店收入明细" :visible.sync="gapDialog">
                                <div style="position:absolute;top:44px;">
                                    门店：{{store_name}}　　交易时间段：{{formInline.start_time}} - {{formInline.end_time}}
                                </div>
                                <el-table  highlight-current-row :data="gapList" border>
                                    <el-table-column align="center" property="datetime" label="日期"></el-table-column>
                                    <el-table-column align="center" label="实收金额(元)">
                                        <template slot-scope="scope">
                                            {{scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.m1*1+scope.row.m2*1|keepTwoNum}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" label="应收金额(元)">
                                        <template slot-scope="scope">
                                            {{scope.row.m0*1+scope.row.m1*1+scope.row.m2*1+scope.row.m3*1|keepTwoNum}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" label="差额">
                                        <template slot-scope="scope">
                                            <span :class="(scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.m1*1+scope.row.m2*1)-(scope.row.m0*1+scope.row.m1*1+scope.row.m2*1+scope.row.m3*1)<0?'danger':'success'">
                                                {{(scope.row.cash_actual*1+scope.row.bank_actual*1+scope.row.m1*1+scope.row.m2*1)-(scope.row.m0*1+scope.row.m1*1+scope.row.m2*1+scope.row.m3*1)|keepTwoNum}}
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" label="细分类账目核对">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small" @click='checkClick(scope.$index)'>细分类账目核对</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" property="nick" label="店员"></el-table-column>
                                    <el-table-column align="center" label="备注">
                                        <template slot-scope="scope">
                                            {{scope.row.remark?scope.row.remark:'无'}}
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!-- 核对弹框 -->
                                <el-dialog :close-on-click-modal="false" title="细分类账目核对" :visible.sync="checkDialog"
                                    append-to-body>
                                    <div style="position:absolute;top:44px;">
                                        店员：{{checkList.nick}}　　交易日期：{{checkList.datetime}}
                                    </div>
                                    <table class="customTable">
                                        <thead align="center">
                                            <tr>
                                                <td rowspan="2" style="border-right: 1px solid #303133;"></td>
                                                <td colspan="4" style="border-right: 1px solid #303133;">收银台收入</td>
                                                <td colspan="3">兑币机收入</td>
                                            </tr>
                                            <tr>
                                                <td>现金</td>
                                                <td>支付宝</td>
                                                <td>微信</td>
                                                <td style="border-right: 1px solid #303133;">银行卡</td>
                                                <td>现金</td>
                                                <td>支付宝</td>
                                                <td>微信</td>

                                            </tr>
                                        </thead>
                                        <tbody id="staff_finance_different_content" align="center">
                                            <tr>
                                                <td style="border-right: 1px solid #303133;">{{checkList.nick}}</td>
                                                <td>{{checkList.cash_actual*1|keepTwoNum}}</td>
                                                <td>{{checkList.m1|keepTwoNum}}</td>
                                                <td>{{checkList.m2|keepTwoNum}}</td>
                                                <td style="border-right: 1px solid #303133;">{{checkList.bank_actual*1|keepTwoNum}}</td>
                                                <td>{{checkList.d0|keepTwoNum}}</td>
                                                <td>{{checkList.d1|keepTwoNum}}</td>
                                                <td>{{checkList.d2|keepTwoNum}}</td>
                                            </tr>
                                            <tr>
                                                <td style="border-right: 1px solid #303133;">应收</td>
                                                <td>{{checkList.m0|keepTwoNum}}</td>
                                                <td>{{checkList.m1|keepTwoNum}}</td>
                                                <td>{{checkList.m2|keepTwoNum}}</td>
                                                <td style="border-right: 1px solid #303133;">{{checkList.m3|keepTwoNum}}</td>
                                                <td>{{checkList.d0|keepTwoNum}}</td>
                                                <td>{{checkList.d1|keepTwoNum}}</td>
                                                <td>{{checkList.d2|keepTwoNum}}</td>
                                            </tr>
                                            <tr>
                                                <td style="border-right: 1px solid #303133;">细分类差额</td>
                                                <td>{{checkList.cash_actual*1-checkList.m0*1|keepTwoNum}}</td>
                                                <td>0.00</td>
                                                <td>0.00</td>
                                                <td style="border-right: 1px solid #303133;">{{checkList.bank_actual*1-checkList.m3*1|keepTwoNum}}</td>
                                                <td>0.00</td>
                                                <td>0.00</td>
                                                <td>0.00</td>
                                            </tr>
                                            <tr>
                                                <td style="border-right: 1px solid #303133;">分类差额</td>
                                                <td colspan="4" style="border-right: 1px solid #303133;">{{checkList.cash_actual*1-checkList.m0*1+checkList.bank_actual*1-checkList.m3*1|keepTwoNum}}</td>
                                                <td colspan="3">0.00</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </el-dialog>
                                <!-- 核对弹框结束 -->
                            </el-dialog>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getPage,
        getStoreList,
        getGap
    } from "@/api/finance/store";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                list: null,
                listLoading: false,
                gapDialog: false,
                checkDialog: false,
                currentPage: 1,
                totalDataNumber: 1,
                store_name: '',
                storeList: [],
                gapList: [],
                checkList: {},
                formInline: {
                    store: "",
                    start_time: "",
                    end_time: "",
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            };
        },
        created() {
            this.getStore();
        },
        methods: {
            // 差额弹框
            gapClick(id, index, store_name) {
                this.store_name = store_name
                getGap({
                    store_id: id,
                    start_time: this.formInline.start_time,
                    end_time: this.formInline.end_time
                }).then(response => {
                    this.gapList = response;
                    this.gapDialog = true;
                })
            },
            // 核对弹框
            checkClick(index) {
                this.checkList = this.gapList[index];
                this.checkDialog = true;
            },
            getStore() {
                getStoreList({ category_id: 23 }).then(response => {
                    this.storeList = response;
                    this.formInline.store = response[0].id;
                    this.searchClick();
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response * 20;
                    getList(this.formInline).then(response => {
                        this.list = response;
                        this.listLoading = false;
                    }).catch(res=>{
                        this.listLoading=false;
                    })
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    this.list = response;
                    this.listLoading = false;
                });
            },
        }
    };
</script>
<style>
    .finance_store_container .el-dialog {
        margin-top: 5vh !important;
    }

    .customTable td {
        width: 200px;
        border: 1px solid #dedede;
        height: 40px;
    }

    .customTable {
        border-collapse: collapse;
    }
</style>